<!DOCTYPE html>
<html>
<head>
        <% include global/meta.html %>
        <% include global/top-css.html %>
        <title>yuscms系统</title>
</head>
<body>
        <% include global/header.html %>

        <!-- 当前位置 -->
        <section class="row pc-page pd-10 f-16">
            当前位置>
            <%for(let i=0,pos;i<data.currentNav.length;i++){%>
                <%pos = data.currentNav[i]%>
                <a href="/list/<%=pos.id%>">
                    <%=pos.nav_name%> &gt;  
                </a>
            <%}%>
            <%=data.article.title%>
           
        </section>

        <section class="row pc-page content">
            <div class="col-24 mr-10">

                <!-- 文章内容 -->
                <div class="content bg-f2f2f2 pd-10">
                    <h3 class="text-c f-16 pt-10 pb-10 c-333"><%=data.article.title%></h3>
                    <div class="des text-c f-14 c-999">时间：<%=data.article.date%> 来源：
                        <%=data.article.source%>作者：<%=data.article.author%>
                        点击量：<%=data.article.count%>
                    </div>
                  
                    <article class="article pd-10">
                         <%-data.article.content%>
                    </article>

                   
                </div>

                <!-- 提交评论 -->
                <div class="mt-10 pd-10 bg-f3f3f3">
                    <h3>评论</h3>
                    <form name="add" action=""  @submit.prevent="checkForm" method="post">
                        <input type="hidden" name="cid" value="<%=data.article.id%>">
                        <textarea v-model="content" class="textarea" name="content" class="pd-10 lh-24 f-14 c-666"></textarea>
                        <div> 
                            <span><a href="/user/login">登录</a> 后参与评论</span>
                            <input class="btn btn-primary" name="send" type="submit">
                        </div>
                    </form>
                </div>

                <!-- 评论列表 -->
                <div class="comment-list pd-10">
                    <ul class="transition">
                       
                        <li v-for="item in comment" class="row pd-10 border-b">
                            <img width="40" class="radius-circle" height="40" src="/public/web/img/default-user.jpg">
                            <div class="ml-10">
                                <span class="c-666">{{item.user}} {{item.date}} 赞{{item.zan}}</span>
                                <p class="f-14">{{item.content}} {{item.id}}</p>
                                <p @click="zan(item.id)">点赞</p>
                            </div>
                        </li>
                        
                    </ul>
                    <div class="page text-c">
                        <ul class="pagination" id="page2"></ul>
                    </div>
                </div>
            </div>
           
         </section>

         <% include global/footer.html %>
         <% include global/footer-js.html %>
         <script>
             var vm = new Vue({
                 el:'.content',
                 data:{
                     pageNo:0,
                     comment:[],
                     content:'',
                     pageTotal:null,

                 },
                 methods:{
                    page:function(){
                        var _this = this;
                       
                        if(_this.pageNo<=0){
                            _this.pageNo = 1;
                        }

                        if(_this.pageNo>parseInt(_this.pageTotal)){
                            _this.pageNo = parseInt(_this.pageTotal);
                        }
                        console.log('asdf',_this.pageNo)
                        Page({
                            num:parseInt(_this.pageTotal),	//页码数
                            startnum:_this.pageNo,				//指定页码
                            elem:$('#page2'),		//指定的元素
                            callback:function(n){	//回调函数
                                console.log(n);
                                _this.pageNo = n;
                                _this.commentList()
                            }
                        });
                    },
                     //点赞
                     zan:function(id){
                       var _this = this;
                        $.ajax({
						    url:"/article/zan",
                            data:{"id":id},
                            type: "get",
                            dataType:'json',
                            success:function(data){
                              
                               _this.commentList()
                            }
                        });
                     },
                     //评论列表
                     commentList:function(){
                        let _this = this;
                        $.ajax({
						    url: "/article/comment/list",
                            data:{"id":'<%=data.article.id%>','page':_this.pageNo},
                            type: "get",
                            dataType:'json',
                            success:function(data){
                                console.log(data)
                                _this.comment = data.data;
                                _this.pageTotal = data.pageTotal;
                                _this.page();
                            }
                        });
                     },
                     checkForm:function(){
                        
                         var fm = document.add;
                         if(fm.content.value ==''){
                            alert('亲，内容不能空着哦^_^');
                            return;
                         }

                         if(fm.content.value.length<5){
                            alert('亲，内容不能少于5位哦^_^');
                            return;
                         }

                         if(fm.content.value.length>255){
                            alert('亲，内容多了跑不动了，减肥后提交！^_^');
                            return;
                         }
                         this.add()
                     },
                     add:function(){
                        let _this = this;
                        $.ajax({
						    url: "/article/comment/add",
                            data:{"cid":'<%=data.article.id%>',"content":_this.content},
                            type: "post",
                            dataType:'json',
                            success:function(data){
                                alert('评论成功！等待管理员审核^_^');
                                var fm = document.add;
                                fm.content.value = '';
                                _this.commentList();

                            }
                        });
                     }
                 },
                 created:function(){
                    
                     this.commentList()
                 },
                 mounted:function(){
                     
                 },
                 updated:function(){
                     
                 }
             });
             
         </script>
</body>
</html>